<template>
    <div id="data-view2">
        <div class="data-content2">
            <div class="con-left fl">
                <Label-Tag />
                <Left-Chart-1 />
            </div>
            <div class="con-center fl">
                <Center-Cmp />
            </div>
            <div class="con-right fr">
                <pine-chart />
                <scroll-Board />
            </div>
        </div>
    </div>
</template>
<script>
import CenterCmp from './CenterCmp'
import LeftChart1 from './LeftChart1'
import pineChart from './pineChart'
import LabelTag from './LabelTag'
import scrollBoard from './scrollBoard'

export default {
    name: 'DataView',
    components: {
        CenterCmp,
        LeftChart1,
        pineChart,
        LabelTag,
        scrollBoard
    },
    data() {
        return {}
    },
    methods: {}
}
</script>

<style lang="scss">
#data-view2 {
    width: 100%;
    height: 100%;
    color: #333;

    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .data-content2 {
        width: 100%;
        height: 100%;
        margin: 0, auto;
        padding: 0 20px 20px 20px;
        box-sizing: border-box;

        .con-center {
            width: 35%;
            height: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            position: relative;

            .cen-top {
                width: 100%;
                height: calc(70% - 5px);
                margin-bottom: 25px;
            }

            .cen-bottom {
                width: 100%;
                height: 25%;
            }
        }
        .con-right {
            width: 35%;
            height: 100%;

            .right-top {
                width: 100%;
                height: 33%;
            }
            .right-center {
                width: 100%;
                height: calc(36% - 36px);
            }
            .right-bottom {
                width: 100%;
                height: 32%;
            }
        }

        .con-left {
            width: 30%;
            height: 100%;

            .left-top {
                width: 100%;
                height: calc(40% - 15px);
                position: relative;
            }
            .left-top > .info {
                height: 70%;
                width: 100%;
            }
        }
    }

    .block-left-right-content {
        flex: 1;
        display: flex;
        margin-top: 20px;
    }

    .con-left > .left-bottom {
        width: 100%;
        height: 25%;
    }
    .block-top-bottom-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .block-top-content {
        height: 55%;
        display: flex;
        flex-grow: 0;
        box-sizing: border-box;
        padding-bottom: 20px;
    }
}

.loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 16px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
}
.loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: #324e93;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
}
.loadbox img {
    margin: 10px auto;
    display: block;
    width: 40px;
}
</style>
